<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>聊天 </title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="/chat/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/chat/css/chat.css"/>
    <link rel="stylesheet" type="text/css" href="/chat/css/emotion.css"/>

</head>

<body >
<!-- 头部 开始 -->
<div class="header">
    <div class="header-left" >
        <span><img src="/chat/img/icon_back.png"></span>
    </div>
    <div class="header-center">
        <!-- 名字 -->
        <span>Seven</span>
    </div>
    <div class="header-right">
        <img src="/chat/img/lt_icon_grzl.png" alt="">
    </div>
</div>
<!-- 头部 开始 -->

<!--主要内容 开始-->
<div class="main" id="add_div">
    <p class="more_cont">查看更多消息</p>
	<!--<p class="m-time">2018-08-07 15:01</p>-->
    <!--<div class="m-list clearfix">-->
        <!--<div class="l-head"><img src="img/tx1.png" alt=""></div>-->
        <!--<div class="l-con">-->
            <!--<div class="left"></div>-->
            <!--<p>最近在忙什么？老朋友好久没见面了，有空过来泡茶。</p>-->
        <!--</div>-->
    <!--</div>-->
    <!---->
    <!--<div class="m-list clearfix">-->
        <!--<div class="r-head"><img src="img/tx1.png" alt=""></div>-->
        <!--<div class="r-con">-->
            <!--<div class="right"></div>-->
            <!--<p class="i18n" data-i18n="text">没啥事，晚点过来。</p>-->
        <!--</div>-->
    <!--</div>-->
</div>
<!--主要内容 结束-->


<!-- 导航底部 -->
<div class="footer">
    <div class="footer-normal" tag="0">
        <img id="up_btn" selectattr="src" src="/chat/img/lt_icon_yy.png">
        <img id="up_input" style="display: none;" src="img/up_btn.png" alt="">
    </div>
    <div class="footer-normal " tag="1">
        <div id="input" contenteditable="plaintext-only" class="inp"></div>
        <input type="button" id="btn" style="display: none" value="按住 &nbsp;说话"></input>
    </div>
    <div class="footer-normal em" tag="2">
        <img selectattr="src" src="/chat/img/lt_icon_bq.png">
    </div>
    <div class="footer-normal btn" tag="3">
        <img id="send_up" style="display:none;" selectattr="src" src="/chat/img/up.png">
        <img id="send_add" selectattr="src" src="/chat/img/add.png">
    </div>
</div>


<!-- 更多模块 -->
<div id="add_more">
    <div class="more_img"><img src="/chat/img/add.png" alt="" >
    <input type="file" accept="image/*" id="more_photo">
    </div>
</div>
<!-- 图片模块 -->
<!--<div >-->
    <!--<img class="photo_img" src="img/tx1.png" alt="">-->
<!--</div>-->
<!-- 导航底部 结束 -->

<!-- js -->
<script type="text/javascript" charset="utf-8" src="/chat/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/common.js"></script>
<script type="text/javascript" charset="utf-8" src="/chat/js/emotion.js"></script>
<script src="/chat/js/plugins/layer/layer_mobile.js"></script>
<script src="/chat/js/chat.js"></script>
<script src="js/recorder.js"></script>







<script>

        $(document).on('click', "#up_btn", function () {
            $('#up_btn').hide();
            $('#up_input').show();
            $('#input').hide();
            $('#btn').show();

        })
        $(document).on('click', "#up_input", function () {
            $('#up_btn').show();
            $('#up_input').hide();
            $('#input').show();
            $('#btn').hide();
        })
        $('#btn').on("touchstart",function () {
            $("#btn").val("松开  结束");
            startRecording();
        })
        $('#btn').on("touchend",function () {
            $("#btn").val("按住  说话");
            stopRecording();

        })
        var audio_context;
        var recorder;

        function startUserMedia(stream) {
            var input = audio_context.createMediaStreamSource(stream);//创建一个语音
            recorder = new Recorder(input);//
        }

        function startRecording() {// 点击开始录音
            recorder && recorder.record(); //开始语音
        }

        function stopRecording() {
            recorder && recorder.stop();//停止录音
            createDownloadLink();
            recorder.clear();//？？？算是清楚录音吗？
        }
        var thml_audio ='<p class="m-time">${time}</p>'+
            '<div class="m-list clearfix">'+
            '<div class="r-head"><img src="${src}" alt=""></div>'+
            '<div class="r-con">'+
            '<div class="right"></div>'+
            '<p class="sound clearfix" id="pal_au">' + '<audio id="au" controls style="display: none;" src="${au_url}"></audio>' + '<img  id="au_img" src="img/chat_icon_yy_left_san.png" alt="">' +
            '<span class="au_text">' + '"</span>' +
            '</p>' +
            '</div>'+
            '</div>';
        function createDownloadLink() { // 显示录音的东西
            recorder && recorder.exportWAV(function (blob) { //录音的格式
                var url = URL.createObjectURL(blob);
                var createTime =getNowFormatDate();
                var outHtml='';
                outHtml+=thml_audio.replace('${au_url}', url).replace('${time}', createTime);
                $('.main').append(outHtml);
            });
        }

        //   点击其他全部暂停 本身播放
        $(document).on('click', "#pal_au", function () {
            $(".r-con").each(function (i) {
                var all_au = $(this).find("#pal_au").find("audio").get(0);
                all_au.pause();
                $(this).find("#pal_au").find("span").text(parseInt(all_au.duration)+'"');
            })
            var paly_au = $(this).find("audio").get(0);
            console.log(paly_au.duration);

           $(this).find('img').attr("src","img/chat_icon_yy_left_yi.png");
            paly_au.currentTime = 0.0;
            paly_au.play();
        })
        //调用录音的东西
        window.onload = function init() {
            try {
                // webkit shim
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
                window.URL = window.URL || window.webkitURL;

                audio_context = new AudioContext;
                Console.log("麦克风");
                // __log('Audio context set up.');
                // __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
            } catch (e) {
                console.log("1");
            }

        navigator.getUserMedia({audio: true}, startUserMedia, function (e) {
            console.log("2");
        });
        }

</script>
</body>

</html>